<template>
  <div>
    <c-title text="我的库存"></c-title>
    <van-search class="search-bar" shape="round" placeholder="请输入搜索内容" v-model="searchKeyword"></van-search>
    <van-dropdown-menu z-index="9999">
      <van-dropdown-item v-model="stock_type" :options="option1" @change="changeStockType"/>
      <van-dropdown-item v-model="checked" :options="option2" />
    </van-dropdown-menu>
    <d-list @load="getGoodsData" :finished="!isLoadMore" :loading="loading">
      <ul class="goods-list" @click="viewDetails($event)">
        <goods-item class="goods-item" :isCart="checked" idTag="goods_id" v-for="(goodsItem, index) in displayGoodsList" :key="goodsItem.id" :data="goodsItem" :index="index" @add="addCart" @show="viewDetails" @change="changeCart" />
      </ul>
    </d-list>
    <!-- 商品规格弹窗 -->
    <yz-specs :goodsInfo="goodinfo" v-model="popupSpecs" v-on:closeSpecsPopup="close_yz_specs_popup" :carts='cartList'></yz-specs>
    <div class="bottom-fixed-button set-pc-style" v-show="checked">
      <div class="button" @click.stop="openCartListPopup">
        去提货
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Toast } from "vant";
import GoodsItem from "@/components/member/stock/goods_item.vue";
import yzSpecs from "components/ui_components/yz_specs";
import DList from "@/components/dlist";
export default {
  activated() {
    this.getGoodsData();
  },
  data() {
    return {
      checked: false,
      goodsList: [],
      loading: false,
      page: 1,
      isLoadMore: true,
      searchKeyword: "",

      popupSpecs: false,
      goodinfo: {},
      activity_gid: 0,
      activity_index: 0,
      cartList: [],
      showCarList: false,

      stock_type: 0,
      option1: [
        { text: '全部商品', value: 0 },
        { text: '有库存商品', value: 1 },
        { text: '无库存商品', value: 2 },
      ],
      option2: [
        { text: '进行提货', value: true },
        { text: '暂不提货', value: false },
      ],
    };
  },
  methods: {
    changeStockType(){
      this.loading = false;
      this.isLoadMore = true;
      this.page = 1;
      this.goodsList = [];
      this.getGoodsData();
    },
    viewDetails(event) {
      const id = event?.target?.dataset?.id || 0; //* 事件代理 获取点中的商品id
      if(!id) return;
      this.$router.push(this.fun.getUrl("StockDetails", {}, { id }));
    },
    getGoodsData() {
      if (this.loading === true || this.isLoadMore === false) {
        return;
      }
      this.loading = true;
      $http
        .post("plugin.agency.api.stock.get-list", {
          page: this.page,
          stock_type: this.stock_type
        })
        .then((data, result, msg) => {
          if (result === 0) {
            Toast.fail(msg);
            return;
          }
          this.page++;
          data = data.data;
          if (data.current_page === data.last_page || data.data.length === 0 || data.data.length < data.per_page) {
            this.isLoadMore = false;
          }
          for (let index = 0; index < data.data.length; index++) {
            data.data[index].total = 0;
          }
          this.goodsList.push(...data.data);
          this.loading = false;
        });
    },
    addCart(e) {
      this.activity_index = e.index;
      if (e.isSpecs) {
        this.goodinfo = this.goodsList[e.index];
        this.activity_gid = e.id;
        this.popupSpecs = true; //规格商品，显示规格弹窗
        return;
      }
      this.$set(this.goodsList[e.index], "total", 1);
      this.cartList.push({
        // goods: {
        //   title: e.title,
        // },
        goods_id: e.id,
        total: 1,
        option_id: 0
      });
    },
    changeCart(e) {
      // 更新购物车数量
      this.popupSpecs = false;
      if (e.index !== null && e.index !== undefined && e.index !== '') this.$set(this.goodsList[e.index], "total", e.num);

      this.cartList.forEach(element => {
        if (element.goods_id == e.id) element.total = e.num;
      });
    },
    close_yz_specs_popup(_optionsId, goodsCount, clicktype, id) {
      this.popupSpecs = false;
      let found = false;
      if (clicktype == 1) {
        this.goodsList[this.activity_index].total = 0;
        this.cartList.forEach(element => {
          if (element.goods_id == this.activity_gid){
            if(element.option_id == _optionsId) {
              found = true;
              element.total = goodsCount;
            }
            this.goodsList[this.activity_index].total += element.total;
          }
        });

        if (!found) {
          this.goodsList[this.activity_index].total += goodsCount;
          this.cartList.push({
            goods_id: this.activity_gid,
            total: goodsCount,
            option_id: _optionsId,
            // index: this.activity_index
          });

        }
      }
    },
    openCartListPopup() {
      this.cartList = this.cartList.filter(item => item.total > 0);
      if (this.cartList.length == 0) {
        this.$toast("请提货商品！");
        return;
      }
      let json_data = {
        tag: "agency-th"
      };
      json_data.goods = JSON.stringify(this.cartList);
      this.$router.push(this.fun.getUrl("goodsorder", {}, json_data));
    },
  },
  computed: {
    displayGoodsList() {
      if (this.searchKeyword) {
        return this.goodsList.filter(item => {
          return item.title.indexOf(this.searchKeyword) !== -1;
        });
      } else {
        return this.goodsList;
      }
    }
  },
  components: {
    VanSearch: Search,
    GoodsItem,
    DList,
    yzSpecs
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.goods-list {
  padding: 0.9375rem;
}

.goods-item {
  margin-bottom: 0.625rem;
}
.carlist {
  .bottom-car {
    position: relative;
  }
}
.bottom-fixed-button {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 3.125rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
  background-color: #fff;
  box-shadow: 1px 1px 14px 0 rgba(184, 184, 184, 0.52);

  .button {
    margin-left: 0.875rem;
    width: 90px;
    height: 32px;
    line-height: 32px;
    background-color: #f15053;
    border-radius: 16px;
    font-size: 14px;
    color: #fff;
    position: relative;
  }

  .carts-num {
    padding: 0 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 14px;
    position: absolute;
    top: -8px;
    right: -5px;
    background-color: #ff5d5c !important;
    color: #fff;
    border-radius: 0.875rem;
    box-shadow: 1px 1px 6px #b74444;
  }
}
</style>
